<template>
  <div>
    <el-form ref="formRef"   class="login_form" :model="loginForm" >
            <el-form-item prop="name">
              <el-input placeholder="请输入用户名"  v-model="loginForm.username"  ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password"
               placeholder="请输入密码" v-model="loginForm.password"></el-input>
           </el-form-item>
           <el-form-item class="btns">
              <el-button type="primary" @click="login">登陆</el-button>
              <el-button type="info" @click="resetLoginForm">重置</el-button>
           </el-form-item>

          </el-form>
  </div>
</template>

<script>
export default{
  data(){
    return{
      loginForm:{
        username:'',
        password:''
      }

    }
  },
  methods:{
    resetLoginForm(){
     this.$refs.formRef.resetFields();
    },
     async login(){
     const {data:res}= await this.$http.post("http://localhost:8092/user/login",this.loginForm)
     console.log(res)
      if(res.status==200){
        this.$router.push("/home")
        window.sessionStorage.setItem("token",res.data)
      }else{
        this.$message.error("登陆失败");
      }
    }

  }


}
</script>

<style>
.login_form{
     width: 450px;
     height: 300px;
}
 .btns{
     display: flex;
     justify-content: center;
   }

</style>
